<template>
  <d2-container>
    <div class="mod-role">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList(true)" size="small">
        <!-- 可以根据需要添加搜索框 -->
        <el-form-item label="设备编码">
          <el-input v-model="dataForm.deviceNumber" placeholder="请输入设备编码"></el-input>
        </el-form-item>
        <el-form-item label="IMU状态">
          <el-select v-model="dataForm.imuStatus" placeholder="IMU状态" style="width: 120px;">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Flash状态">
          <el-select v-model="dataForm.flashStatus" placeholder="Flash状态" style="width: 120px;">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上报时间">
          <el-date-picker
            v-model="dataForm.reportTime"
            type="daterange"
            range-separator="-"
            start-placeholder="上报开始时间"
            end-placeholder="上报结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList(true)">查询</el-button>
          <el-button v-if="isAuth('sys:device:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button v-if="isAuth('sys:device:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="deviceNumber"
          header-align="center"
          align="center"
          label="设备编号">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          header-align="center"
          align="center"
          label="设备名称">
        </el-table-column>
        <el-table-column prop="companyName" label="单位名称">
          <template #default="{ row }">
            <span>{{ row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceIdentifier"
          header-align="center"
          align="center"
          label="设备识别码">
        </el-table-column>
        <el-table-column
          prop="userIdentifier"
          header-align="center"
          align="center"
          label="用户识别码">
        </el-table-column>
        <el-table-column
          prop="iccid"
          header-align="center"
          align="center"
          label="ICCID">
        </el-table-column>
        <el-table-column
          prop="imei"
          header-align="center"
          align="center"
          label="IMEI">
        </el-table-column>
        <el-table-column
          prop="signalStrength"
          header-align="center"
          align="center"
          label="信号强度">
        </el-table-column>
        <el-table-column
          prop="batteryVoltage"
          header-align="center"
          align="center"
          label="电池电压(mV)">
        </el-table-column>
        <el-table-column
          prop="imuStatus"
          header-align="center"
          align="center"
          label="IMU状态">
          <template slot-scope="{ row }">
            <span :style="{ color: row.imuStatus === '正常' ? 'green' : 'red' }">{{ row.imuStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="flashStatus"
          header-align="center"
          align="center"
          label="Flash状态">
          <template slot-scope="{ row }">
            <span :style="{ color: row.flashStatus === '正常' ? 'green' : 'red' }">{{ row.flashStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="softwareVersion"
          header-align="center"
          align="center"
          label="软件版本号">
        </el-table-column>
        <el-table-column
          prop="reportTime"
          header-align="center"
          align="center"
          label="上报时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="绑定ICCID"
          width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-4"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </d2-container>
</template>

<script>
  import AddOrUpdate from './role-add-or-update'
  export default {
    name: 'sys_device',
    data() {
      return {
        dataForm: {
          deviceNumber: '',
          imuStatus: '',
          flashStatus: '',
          startReportTime: null,
          endReportTime: null
        },
        dataList: [
          { deviceNumber: 'D001', deviceName: '设备1', companyName: '南京清优', deviceIdentifier: 'DI001', userIdentifier: 'UI001', iccid: '89860012345678901234', imei: '351234567890123', signalStrength: '强', batteryVoltage: 3700, imuStatus: '正常', flashStatus: '正常', softwareVersion: '1.0.0', reportTime: '2024-01-01 08:00:00' },
          { deviceNumber: 'D002', deviceName: '设备2', companyName: '南京清优', deviceIdentifier: 'DI002', userIdentifier: 'UI002', iccid: '89860012345678901235', imei: '351234567890124', signalStrength: '中', batteryVoltage: 3650, imuStatus: '正常', flashStatus: '正常', softwareVersion: '1.0.1', reportTime: '2024-01-01 09:00:00' },
          { deviceNumber: 'D003', deviceName: '设备3', companyName: '南京清优', deviceIdentifier: 'DI003', userIdentifier: 'UI003', iccid: '89860012345678901236', imei: '351234567890125', signalStrength: '弱', batteryVoltage: 3600, imuStatus: '异常', flashStatus: '正常', softwareVersion: '1.1.0', reportTime: '2024-01-01 10:00:00' },
          { deviceNumber: 'D004', deviceName: '设备4', companyName: '南京清优', deviceIdentifier: 'DI004', userIdentifier: 'UI004', iccid: '89860012345678901237', imei: '351234567890126', signalStrength: '强', batteryVoltage: 3750, imuStatus: '正常', flashStatus: '异常', softwareVersion: '1.1.1', reportTime: '2024-01-01 11:00:00' },
          { deviceNumber: 'D005', deviceName: '设备5', companyName: '南京清优', deviceIdentifier: 'DI005', userIdentifier: 'UI005', iccid: '89860012345678901238', imei: '351234567890127', signalStrength: '中', batteryVoltage: 3620, imuStatus: '正常', flashStatus: '正常', softwareVersion: '2.0.0', reportTime: '2024-01-01 12:00:00' },
          { deviceNumber: 'D006', deviceName: '设备6', companyName: '南京清优', deviceIdentifier: 'DI006', userIdentifier: 'UI006', iccid: '89860012345678901239', imei: '351234567890128', signalStrength: '弱', batteryVoltage: 3580, imuStatus: '异常', flashStatus: '异常', softwareVersion: '2.0.1', reportTime: '2024-01-01 13:00:00' },
          { deviceNumber: 'D007', deviceName: '设备7', companyName: '南京清优', deviceIdentifier: 'DI007', userIdentifier: 'UI007', iccid: '89860012345678901240', imei: '351234567890129', signalStrength: '强', batteryVoltage: 3720, imuStatus: '正常', flashStatus: '正常', softwareVersion: '2.1.0', reportTime: '2024-01-01 14:00:00' },
          { deviceNumber: 'D008', deviceName: '设备8', companyName: '南京清优', deviceIdentifier: 'DI008', userIdentifier: 'UI008', iccid: '89860012345678901241', imei: '351234567890130', signalStrength: '中', batteryVoltage: 3630, imuStatus: '正常', flashStatus: '异常', softwareVersion: '2.1.1', reportTime: '2024-01-01 15:00:00' },
          { deviceNumber: 'D009', deviceName: '设备9', companyName: '南京清优', deviceIdentifier: 'DI009', userIdentifier: 'UI009', iccid: '89860012345678901242', imei: '351234567890131', signalStrength: '弱', batteryVoltage: 3590, imuStatus: '异常', flashStatus: '正常', softwareVersion: '3.0.0', reportTime: '2024-01-01 16:00:00' },
          { deviceNumber: 'D010', deviceName: '设备10', companyName: '南京清优', deviceIdentifier: 'DI010', userIdentifier: 'UI010', iccid: '89860012345678901243', imei: '351234567890132', signalStrength: '强', batteryVoltage: 3730, imuStatus: '正常', flashStatus: '正常', softwareVersion: '3.0.1', reportTime: '2024-01-01 17:00:00' }
        ],
        dataListLoading: false,
        dataListSelections: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 100,
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    methods: {
      getDataList(reset) {
        if (reset) {
          this.pageIndex = 1
        }
        // 这里可以添加获取数据的接口调用
      },
      sizeChangeHandle(newSize) {
        this.pageSize = newSize
        this.getDataList()
      },
      currentChangeHandle(newPage) {
        this.pageIndex = newPage
        this.getDataList()
      },
      selectionChangeHandle(selections) {
        this.dataListSelections = selections
      },
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      deleteHandle(id) {
        if (id) {
          // 这里可以添加删除单条数据的接口调用
        } else {
          // 这里可以添加批量删除数据的接口调用
        }
      },
      isAuth(permission) {
        // 这里可以添加权限验证逻辑
        return true
      }
    }
  }
</script>
